<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <title>任务发布</title>
</head>
<body>
    <h1>自由职业者任务发布</h1>

    <h2>发布新任务</h2>
    <form id="jobForm">
        <input type="text" id="jobDescription" placeholder="任务描述" required>
        <input type="number" id="jobBounty" placeholder="赏金 (ETH)" required>
        <button type="submit">发布任务</button>
    </form>

    <h2>已发布任务</h2>
    <div id="jobsList">
        <!-- 任务列表将通过JavaScript动态填充 -->
    </div>

    <script>
        // 创建任务
        document.getElementById('jobForm').addEventListener('submit', async (event) => {
            event.preventDefault();
            const description = document.getElementById('jobDescription').value;
            const bounty = document.getElementById('jobBounty').value;
            const creator = "用户"; // 这里应替换为实际用户

            const response = await fetch('/job', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ description, bounty, creator })
            });

            if (response.ok) {
                alert("任务发布成功！");
                loadJobs(); // 刷新任务列表
            } else {
                alert("任务发布失败，请重试。");
            }
        });

        // 加载已发布任务
        async function loadJobs() {
            const response = await fetch('/jobs'); // 假设这个端点返回所有任务
            const jobs = await response.json();

            const jobsList = document.getElementById('jobsList');
            jobsList.innerHTML = ''; // 清空旧数据

            jobs.forEach(job => {
                const jobItem = document.createElement('div');
                jobItem.className = 'job';
                jobItem.innerHTML = `
                    <h4>任务 #${job.job_id}</h4>
                    <p><strong>发布者:</strong> ${job.creator}</p>
                    <p><strong>描述:</strong> ${job.description}</p>
                    <p><strong>赏金:</strong> ${job.bounty} ETH</p>
                    <p><strong>状态:</strong> ${job.completed ? "已完成" : "未完成"}</p>
                    <button onclick="applyForJob(${job.job_id})">申请任务</button>
                `;
                jobsList.appendChild(jobItem);
            });
        }

        // 申请任务
        async function applyForJob(job_id) {
            const applicant = "用户"; // 这里应替换为实际用户

            const response = await fetch('/job/apply', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ job_id, applicant })
            });

            if (response.ok) {
                alert("申请成功！");
                loadJobs(); // 刷新任务列表
            } else {
                alert("申请失败，请重试。");
            }
        }

        // 初始加载任务
        loadJobs();
    </script>
</body>
</html>